{extend name="common/header" /}

{block name='body_before'}
<link rel="stylesheet" type="text/css" href="/assets/css/video-filter.css?{:rand(1,99999)}"/>
<script type="text/javascript" src="/assets/libs/jquery/dist/jquery.js"></script>
<script src="/assets/js/lazyload.js"></script>
<script>
    $(() => {
        lazyload();
    });
</script>
{/block}
{block name='body'}
<div class="header">
    <div class="header-left">
        <a title="{:config('site.title')}" href="/" class="header-icon">
            <img src="{:config('site.site_icon')}">
            <span>{:config('site.name')}</span>
        </a>
        <form class="header-search">
            <i class="fa-search fa search-icon"></i>
            <input name="keyword" value="{$request['keyword']??''}" placeholder="搜索" class="header-search-input"/>
        </form>
    </div>
    <div class="header-right">
        <i class="fa fa-snapchat"></i>
    </div>
</div>
<div class="filter">
    <span class="filter-title">分类</span>
    {foreach $category_list as $item}
    <a title="{$item['title']}" class="filter-item {if $item['id']==($request['category_id']??0)} filter-item-active {/if}"
       href="filter?category_id={$item['id']}">{$item['title']}</a>
    {/foreach}
</div>
<div class="list">
    {foreach $list as $item}
    <a {:new_tab_open()} title="{$item['title']}" href="{:url('detail',array('id'=>$item['id']))}">
        <div class="item">
            <div class="item-thumb">
                <img title="{$item['title']}" class="lazyload" data-src="{$item['thumb']}" />
            </div>
            <div class="item-title">
                <h1>{$item['title']}</h1>
            </div>
            <div class="item-intro">
                {$item['desc']}
            </div>
        </div>
    </a>
    {/foreach}
</div>

{$list->render()}
{/block}